<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阻止事件冒泡</title>
    <style>
        #one {
            width: 400px;
            height: 400px;
            background: lightcoral;
        }

        #two {
            width: 200px;
            height: 200px;
            background: lightgreen;
        }

        #three {
            width: 100px;
            height: 100px;
            background: lightblue;
        }
    </style>
</head>

<body>
    <div id="one">
        <div id="two">
            <div id="three"></div>
        </div>
    </div>
    <script>
        //body点击事件
        document.body.onclick = function (e) {
            this.style.backgroundColor = 'black';
        }
        //id选择器定义的DOM元素，js可以执行获取到
        one.onclick = function(e){
            e.stopPropagation() //阻止事件冒泡
            this.style.backgroundColor = 'red'
        }
        two.onclick = function(e){
            e.stopPropagation() //阻止事件冒泡
            this.style.backgroundColor = 'green'
        }
        three.onclick = function(e){
            e.preventDefault(); //阻止默认事件
            e.stopPropagation() //阻止事件冒泡
            this.style.backgroundColor = 'blue'
        }
        // 在父元素和子元素都需要添加事件的时候
        // 希望触发子元素事件时，父元素不要触发事件，这个时候，就需要使用阻止事件冒泡。
    </script>
</body>

</html>